<template>
  <div class="table-body">
    <div class="table-body-box">
      <el-table
          ref="multipleTable"
          :data="arryList"
          :stripe="tableoption.tableStripe"
          :border="tableoption.tableBorder"
          tooltip-effect="dark"
          style="width: 100%"
          header-cell-class-name="table-text-c"
          cell-class-name="table-text-c">
        <el-table-column
            label="学生头像"
            width="100"
            :key="1">
          <template slot-scope="scope">
<!--            <viewerModle type="1" :imgSrc="scope.row.student.pic"></viewerModle>-->
            <ImagePreview :src="scope.row.student?scope.row.student.pic:''" width="40px" height="40px"></ImagePreview>
          </template>
        </el-table-column>
        <el-table-column
            label="学生姓名"
            :key="2">
          <template slot-scope="scope">
            {{ scope.row.student ? scope.row.student.name : '--' }}
          </template>
        </el-table-column>
        <el-table-column
            label="班级"
            :key="3">
          <template slot-scope="scope">
            {{ scope.row.classes ? scope.row.classes.class_name : '' }}
          </template>
        </el-table-column>
        <el-table-column
            label="采集人"
            :key="4">
          <template slot-scope="scope">
            {{ scope.row.user ? scope.row.user.realname : '--' }}
          </template>
        </el-table-column>
        <el-table-column
            label="评测大项"
            :key="5">
          <template slot-scope="scope">
            {{ scope.row.cate ? scope.row.cate.name : '' }}
          </template>
        </el-table-column>
        <el-table-column
            label="评测小项"
            :key="6">
          <template slot-scope="scope">
            {{ scope.row.assess ? scope.row.assess.name : '未找到/已删除' }}
          </template>
        </el-table-column>
        <el-table-column
            label="数值"
            :key="7">
          <template slot-scope="scope">
            <span v-if="scope.row.assess">
              {{ scope.row.assess.type==1 ? scope.row.score+'秒' : scope.row.score+'次' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
            prop="create_time"
            label="采集时间"
            :key="8"
        width="170">
        </el-table-column>
        <el-table-column
            label="操作"
            :key="10"
            width="160">
          <template slot-scope="scope">
            <div style="display: flex;align-items: center;justify-content: center;">
              <el-button type="primary" plain size="mini" class="ml-10"
                         @click="getCornerPoint(scope.row.student ? scope.row.student.id : '', scope.row.student ? scope.row.student.name : '' )">查看评测总览
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <studentPoint :visible.sync="cornerPointVisible" :studentId="studentId" :studentName="studentName"></studentPoint>
  </div>
</template>

<script>
import studentPoint from "../../Development/evaluating/components/studentPoint";

export default {
  components: {
    studentPoint
  },
  name: "studentCollection",
  props: ['arryList', 'tableoption'],
  data() {
    return {
      cornerPointVisible: false,
      studentId: '',
      studentName: ''
    }
  },
  methods: {
    showVideoSrc(video) {
      this.$emit('showvideo', video)
    },
    getCornerPoint(id, name) {
      this.studentId = id
      this.studentName = name
      this.cornerPointVisible = true
    },
    showPointFn(row,index){
      if(!this.arryList[index].showDetail){
        this.$emit('getCornerFn', {row:row,index:index})
      }
    }
  }
}
</script>

<style scoped>
.list {
  display: flex;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid #f4f4f4;
}

.list:last-child {
  border-bottom: none;
}

.list:hover {
  background: #f4f4f4;
  text-decoration: underline;
}

.list-b {
  flex: 1;
}

.list-c {
  color: #e55f00;
}
.list-c em{
  font-style: normal;
}
</style>
